<script setup>
import Zuzu from '@/components/vuezujian/zuzu.vue';
import { ref, reactive } from 'vue'
// 示例组件数据
const message = ref('Hello from ComponentBasics!')
const count = ref(0)
const userInfo = reactive({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com'
})

// 全局组件示例数据
const globalComponentData = ref({
  title: '全局组件示例',
  content: '这是一个全局注册的组件'
})

// 局部组件示例数据
const localComponentData = ref({
  title: '局部组件示例',
  content: '这是一个局部注册的组件'
})

// 动态组件数据
const currentComponent = ref('UserCard')
const componentList = ['UserCard', 'ProductCard', 'ArticleCard']

// 方法
const increment = () => {
  count.value++
}

const switchComponent = (componentName) => {
  currentComponent.value = componentName
}

const updateUserInfo = () => {
  userInfo.name = '李四'
  userInfo.age = 30
  userInfo.email = 'lisi@example.com'
}

// 综合实例切换用
import { ref as vueRef } from 'vue'
const showComprehensive = vueRef(true)
</script>

<!-- 全局组件定义示例 -->
<script>
// 这些组件通常在 main.js 中全局注册
// app.component('GlobalButton', GlobalButton)
</script>

<template>
  <div class="component-basics">
    <!-- 页面标题 -->
    <div class="header">
      <h1 class="title">🧩 Vue 组件注册与使用</h1>
      <p class="subtitle">学习如何创建、注册和使用Vue组件</p>
    </div>

    <!-- 组件基础概念 -->
    <div class="section">
      <h2 class="section-title">📚 组件基础概念</h2>
      <div class="concept-grid">
        <div class="concept-card">
          <div class="concept-icon">🧱</div>
          <h3>什么是组件</h3>
          <p>组件是Vue应用的基本构建块，是可复用的Vue实例，具有独立的逻辑和模板</p>
        </div>
        
        <div class="concept-card">
          <div class="concept-icon">🔄</div>
          <h3>组件复用</h3>
          <p>组件可以在多个地方重复使用，每个组件实例都维护自己的状态</p>
        </div>
        
        <div class="concept-card">
          <div class="concept-icon">🎯</div>
          <h3>单一职责</h3>
          <p>每个组件应该专注于一个特定的功能，保持代码的清晰和可维护性</p>
        </div>
      </div>
    </div>

    <!-- 全局组件注册 -->
    <div class="section">
      <h2 class="section-title">🌍 全局组件注册</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>代码示例</h3>
          <pre class="code-block"><code>// main.js
import { createApp } from 'vue'
import App from './App.vue'
import GlobalButton from './components/GlobalButton.vue'

const app = createApp(App)

// 全局注册组件
app.component('GlobalButton', GlobalButton)

app.mount('#app')</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <!-- 模拟全局组件 -->
            <div class="global-component">
              <h4>{{ globalComponentData.title }}</h4>
              <p>{{ globalComponentData.content }}</p>
              <button class="demo-btn primary" @click="increment">
                全局按钮 ({{ count }})
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 全局注册特点</h4>
        <ul>
          <li>在应用的任何组件模板中都可以使用</li>
          <li>注册后在整个应用中都可用</li>
          <li>适合频繁使用的基础组件</li>
          <li>会增加打包体积，即使未使用也会被包含</li>
        </ul>
      </div>
    </div>

    <!-- 局部组件注册 -->
    <div class="section">
      <h2 class="section-title">🏠 局部组件注册</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>代码示例</h3>
          <pre class="code-block"><code>// ParentComponent.vue
&lt;script setup&gt;
import ChildComponent from './ChildComponent.vue'
import AnotherComponent from './AnotherComponent.vue'

// 组件自动注册（Composition API）
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;ChildComponent /&gt;
    &lt;AnotherComponent /&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </div>
        
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <!-- 模拟局部组件 -->
            <div class="local-component">
              <h4>{{ localComponentData.title }}</h4>
              <p>{{ localComponentData.content }}</p>
              <button class="demo-btn secondary" @click="updateUserInfo">
                更新用户信息
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>🔍 局部注册特点</h4>
        <ul>
          <li>只在当前组件中可用</li>
          <li>需要先导入再使用</li>
          <li>更好的代码分割和按需加载</li>
          <li>推荐的注册方式</li>
        </ul>
      </div>
    </div>

    <!-- 组件使用示例 -->
    <Zuzu />
    <div class="section">
      <h2 class="section-title">🎮 组件使用示例</h2>
      
      <!-- 用户卡片组件 -->
      <div class="component-example">
        <h3>用户卡片组件</h3>
        <div class="user-card">
          <div class="user-avatar">👤</div>
          <div class="user-info">
            <h4>{{ userInfo.name }}</h4>
            <p>年龄: {{ userInfo.age }}</p>
            <p>邮箱: {{ userInfo.email }}</p>
          </div>
          <div class="user-actions">
            <button class="demo-btn success" @click="updateUserInfo">
              更新信息
            </button>
          </div>
        </div>
      </div>
      
      <!-- 计数器组件 -->
      <div class="component-example">
        <h3>计数器组件</h3>
        <div class="counter-card">
          <div class="counter-display">
            <span class="counter-number">{{ count }}</span>
          </div>
          <div class="counter-controls">
            <button class="demo-btn warning" @click="count--">
              -1
            </button>
            <button class="demo-btn info" @click="count = 0">
              重置
            </button>
            <button class="demo-btn warning" @click="count++">
              +1
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 动态组件示例 -->
    <div class="section">
      <h2 class="section-title">🔄 动态组件切换</h2>
      <div class="dynamic-demo">
        <div class="component-tabs">
          <button 
            v-for="component in componentList" 
            :key="component"
            class="tab-btn"
            :class="{ active: currentComponent === component }"
            @click="switchComponent(component)"
          >
            {{ component }}
          </button>
        </div>
        
        <div class="dynamic-content">
          <!-- 模拟动态组件 -->
          <div v-if="currentComponent === 'UserCard'" class="dynamic-card user">
            <h4>👤 用户卡片</h4>
            <p>显示用户基本信息的组件</p>
          </div>
          
          <div v-else-if="currentComponent === 'ProductCard'" class="dynamic-card product">
            <h4>📦 产品卡片</h4>
            <p>展示产品信息的组件</p>
          </div>
          
          <div v-else-if="currentComponent === 'ArticleCard'" class="dynamic-card article">
            <h4>📄 文章卡片</h4>
            <p>显示文章摘要的组件</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 最佳实践 -->
    <div class="section">
      <h2 class="section-title">💡 最佳实践</h2>
      <div class="best-practices">
        <div class="practice-card">
          <div class="practice-icon">📝</div>
          <h4>命名规范</h4>
          <ul>
            <li>使用 PascalCase 命名组件</li>
            <li>组件名应该具有描述性</li>
            <li>避免与HTML元素冲突</li>
          </ul>
        </div>
        
        <div class="practice-card">
          <div class="practice-icon">📁</div>
          <h4>文件组织</h4>
          <ul>
            <li>每个组件一个文件</li>
            <li>使用 .vue 单文件组件</li>
            <li>合理的目录结构</li>
          </ul>
        </div>
        
        <div class="practice-card">
          <div class="practice-icon">🎯</div>
          <h4>组件设计</h4>
          <ul>
            <li>保持组件的单一职责</li>
            <li>合理使用 props 和 events</li>
            <li>避免过度嵌套</li>
          </ul>
        </div>
        
        <div class="practice-card">
          <div class="practice-icon">⚡</div>
          <h4>性能优化</h4>
          <ul>
            <li>优先使用局部注册</li>
            <li>合理使用异步组件</li>
            <li>避免不必要的重渲染</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 练习任务 -->
    <div class="section">
      <h2 class="section-title">🎯 练习任务</h2>
      <div class="exercise-list">
        <div class="exercise-item">
          <h4>任务 1: 创建基础组件</h4>
          <p>创建一个简单的按钮组件，支持不同的样式和点击事件</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 2: 用户信息卡片</h4>
          <p>创建一个用户信息展示组件，包含头像、姓名、邮箱等信息</p>
        </div>
        
        <div class="exercise-item">
          <h4>任务 3: 动态组件列表</h4>
          <p>创建一个可以动态切换不同组件的列表页面</p>
        </div>
      </div>
    </div>

    <!-- 内置组件进阶导航 -->
    <div class="section" style="text-align:center;">
      <button class="demo-btn info" @click="() => document.getElementById('suspense-demo').scrollIntoView({behavior: 'smooth'})">Suspense 异步组件</button>
      <button class="demo-btn info" @click="() => document.getElementById('keepalive-demo').scrollIntoView({behavior: 'smooth'})">KeepAlive 缓存组件</button>
      <button class="demo-btn info" @click="() => document.getElementById('comprehensive-demo').scrollIntoView({behavior: 'smooth'})">综合实例</button>
    </div>

    <!-- Suspense 异步组件演示 -->
    <div class="section" :id="'suspense-demo'">
      <h2 class="section-title">⏳ Suspense 异步组件</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>代码示例</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('@/components/vuezujian/zuzu.vue'))
&lt;/script&gt;

&lt;template&gt;
  &lt;Suspense&gt;
    &lt;template #default&gt;
      &lt;AsyncComp /&gt;
    &lt;/template&gt;
    &lt;template #fallback&gt;
      &lt;div&gt;加载中...&lt;/div&gt;
    &lt;/template&gt;
  &lt;/Suspense&gt;
&lt;/template&gt;</code></pre>
        </div>
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <Suspense>
              <template #default>
                <Zuzu />
              </template>
              <template #fallback>
                <div>加载中...</div>
              </template>
            </Suspense>
          </div>
        </div>
      </div>
      <div class="info-box">
        <h4>🔍 Suspense 特点</h4>
        <ul>
          <li>用于异步组件加载时的占位和错误处理</li>
          <li>可自定义 loading/fallback 内容</li>
          <li>仅 Vue3 支持</li>
        </ul>
      </div>
    </div>

    <!-- KeepAlive 缓存组件演示 -->
    <div class="section" :id="'keepalive-demo'">
      <h2 class="section-title">🗂️ KeepAlive 组件缓存</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>代码示例</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { ref } from 'vue'
import Zuzu from '@/components/vuezujian/zuzu.vue'
const current = ref('Zuzu')
const comps = { Zuzu }
&lt;/script&gt;

&lt;template&gt;
  &lt;button @click="current = 'Zuzu'"&gt;Zuzu组件&lt;/button&gt;
  &lt;keep-alive&gt;
    &lt;component :is="comps[current]" /&gt;
  &lt;/keep-alive&gt;
&lt;/template&gt;</code></pre>
        </div>
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <keep-alive>
              <Zuzu />
            </keep-alive>
          </div>
        </div>
      </div>
      <div class="info-box">
        <h4>🔍 KeepAlive 特点</h4>
        <ul>
          <li>缓存动态组件的状态和 DOM</li>
          <li>适合表单、Tab 页等场景</li>
          <li>可配合 include/exclude/max 控制缓存</li>
        </ul>
      </div>
    </div>

    <!-- 综合实例演示 -->
    <div class="section" :id="'comprehensive-demo'">
      <h2 class="section-title">🌟 综合实例：Suspense + KeepAlive</h2>
      <div class="demo-container">
        <div class="code-demo">
          <h3>代码示例</h3>
          <pre class="code-block"><code>&lt;script setup&gt;
import { ref, defineAsyncComponent } from 'vue'
const AsyncZuzu = defineAsyncComponent(() => import('@/components/vuezujian/zuzu.vue'))
const show = ref(true)
&lt;/script&gt;

&lt;template&gt;
  &lt;button @click="show = !show"&gt;切换显示&lt;/button&gt;
  &lt;keep-alive&gt;
    &lt;Suspense v-if="show"&gt;
      &lt;template #default&gt;
        &lt;AsyncZuzu /&gt;
      &lt;/template&gt;
      &lt;template #fallback&gt;
        &lt;div&gt;加载中...&lt;/div&gt;
      &lt;/template&gt;
    &lt;/Suspense&gt;
  &lt;/keep-alive&gt;
&lt;/template&gt;</code></pre>
        </div>
        <div class="live-demo">
          <h3>实际效果</h3>
          <div class="demo-area">
            <button class="demo-btn info" @click="showComprehensive = !showComprehensive">切换显示</button>
            <keep-alive>
              <Suspense v-if="showComprehensive">
                <template #default>
                  <Zuzu />
                </template>
                <template #fallback>
                  <div>加载中...</div>
                </template>
              </Suspense>
            </keep-alive>
          </div>
        </div>
      </div>
      <div class="info-box">
        <h4>🔍 综合用法说明</h4>
        <ul>
          <li>Suspense 可与 KeepAlive 嵌套组合</li>
          <li>适合需要缓存的异步组件场景</li>
          <li>可灵活切换和缓存组件状态</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-basics {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: white;
}

/* 页面头部 */
.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 章节样式 */
.section {
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 10px;
}

/* 概念网格 */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.concept-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.concept-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.concept-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.concept-card p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

/* 演示容器 */
.demo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.code-demo, .live-demo {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
}

.code-demo h3, .live-demo h3 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
}

.code-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-x: auto;
  margin: 0;
}

.demo-area {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
}

/* 组件示例 */
.global-component, .local-component {
  text-align: center;
}

.global-component h4, .local-component h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.global-component p, .local-component p {
  margin: 0 0 15px 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 按钮样式 */
.demo-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 5px;
}

.demo-btn.primary {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
}

.demo-btn.secondary {
  background: linear-gradient(45deg, #a8edea, #fed6e3);
  color: #333;
}

.demo-btn.success {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  color: white;
}

.demo-btn.warning {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  color: white;
}

.demo-btn.info {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 信息框 */
.info-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #4facfe;
}

.info-box h4 {
  margin: 0 0 10px 0;
  color: #4facfe;
}

.info-box ul {
  margin: 0;
  padding-left: 20px;
}

.info-box li {
  margin-bottom: 5px;
  font-size: 0.9rem;
}

/* 组件示例 */
.component-example {
  margin-bottom: 25px;
}

.component-example h3 {
  margin: 0 0 15px 0;
  font-size: 1.2rem;
}

.user-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  gap: 20px;
}

.user-avatar {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info {
  flex: 1;
}

.user-info h4 {
  margin: 0 0 5px 0;
  font-size: 1.3rem;
}

.user-info p {
  margin: 0 0 3px 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.counter-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.counter-display {
  margin-bottom: 20px;
}

.counter-number {
  font-size: 3rem;
  font-weight: bold;
  color: #4facfe;
}

.counter-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 动态组件 */
.dynamic-demo {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
}

.component-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn.active {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dynamic-content {
  min-height: 120px;
}

.dynamic-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.dynamic-card h4 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.dynamic-card p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 最佳实践 */
.best-practices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.practice-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.practice-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.practice-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: center;
}

.practice-card h4 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  text-align: center;
}

.practice-card ul {
  margin: 0;
  padding-left: 20px;
}

.practice-card li {
  margin-bottom: 5px;
  font-size: 0.85rem;
}

/* 练习任务 */
.exercise-list {
  display: grid;
  gap: 15px;
}

.exercise-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid #56ab2f;
}

.exercise-item h4 {
  margin: 0 0 10px 0;
  color: #a8e6cf;
}

.exercise-item p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .component-basics {
    padding: 15px;
  }
  
  .demo-container {
    grid-template-columns: 1fr;
  }
  
  .concept-grid {
    grid-template-columns: 1fr;
  }
  
  .best-practices {
    grid-template-columns: 1fr;
  }
  
  .user-card {
    flex-direction: column;
    text-align: center;
  }
  
  .component-tabs {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 2rem;
  }
  
  .section {
    padding: 20px;
  }
  
  .counter-controls {
    flex-direction: column;
    align-items: center;
  }
}
</style>